<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
        .mainContent {

        }

        .pageHeader {
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
            position: relative;
        }

        .pageHeader .backLink {
            position: absolute;
            bottom: 10px;
            left: 230px;
            font-size: 15px;

        }
        .orderContent {
            /*text-align: center;*/
        }
        .orderPanel li {
            list-style: none;
            margin-bottom: 22px;

        }
        .orderPanel li strong {

            text-align: right;
            display: inline-block;
            width: 100px;

        }
        .orderPanel li span {
            margin-left: 30px;
        }

        .orderPanel li address {
            display: inline-block;
            margin-left: 30px;
            margin-bottom: 0;
        }
        .orderPanel table th,
        .orderPanel table td {
            text-align: center;
        }
        .goodsImg img {
            width: 140px;
            height: 140px;

        }
        .goodsMsg {
            width: 280px;

        }
        </style>
        </head>
<body>
<div class="container">
    <div class="row">
        <section class="mainContent">
            <div class="pageHeader col-md-12">
                <h2>订单-详情查看</h2>
                <!--backLink-->
                <a href="javascript:" class="backLink">返回</a>

            </div>

            <div class="orderContent col-md-10 col-md-offset-1">
                <div class="panel panel-default orderPanel">
                    <div class="panel-body">
                        <ul>
                            <li>
                              <strong class="text-left">订单号：</strong><span class="">1234567890</span>

                            </li>
                            <li>
                              <strong>创建时间：</strong><span>2017-12-04 2:34</span>
                            </li>
                            <li>
                             <strong>收件人：</strong><address>小肥威，珠海市，香洲区，我也不知道在哪里</address>
                            </li>
                            <li>
                                <strong>订单状态：</strong><span>未付款</span><span class="label label-warning">未发货</span>
                            </li>
                            <li>
                                <strong>付款方式：</strong><span>在线支付</span>
                            </li>
                            <li>
                                <strong>订单金额：</strong><span>￥99999</span>
                            </li>

                        </ul>
                        <table class="table table-bordered table-striped col-md-12">
                            <thead>
                            <tr>
                                <th>商品图片</th>
                                <th>商品信息</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>合计</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="goodsImg">
                                    <img src="../images/21.jpg" alt="图片出错了" class="img-rounded">
                                </td>
                                <td class="goodsMsg">
                                    <p>上面那个橙色标签，如果是已发货，请换成蓝色</p>
                                </td>
                                <td>
                                    <p>9999</p>
                                </td>
                                <td>
                                    <p>1</p>
                                </td>
                                <td>
                                    <p>9999</p>
                                </td>


                            </tr>
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>

        </section>
    </div>
    </div>


<script src="../js/jquery-2.1.1.js"></script>
<script>
    //点击“返回”按钮
    $(".backLink").on("click", function () {
        //获取父页面的iframe 元素，并且更改它的src地址
        $("#myIframe", window.parent.document).attr("src", "Mall/OrderList.html");

    })
</script>
</body>
</html>